<script setup>
import { ref, nextTick, onMounted, toRefs, toRef } from "vue";
import { getTableData, editItem } from "@/api/permission/menu";
import MyForm from "./components/form.vue";
import { Delete, Edit, Plus } from "@element-plus/icons-vue";
const tableData = ref([]);

// 获取表格数据
const initData = async () => {
  const { data } = await getTableData();
  tableData.value = data;
};
initData();

// 是否显示切换
const handlerChange = async (val, row) => {
  await editItem({
    id: row.value.id,
    hidden: val,
  });
  row.value.hidden = val;
};
</script>
<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
    >
      <el-table-column prop="permission_name" label="菜单名称" />
      <el-table-column prop="route" label="菜单地址" />
      <el-table-column prop="permission_mark" label="权限标识" />
      <el-table-column prop="icon" label="图标" />
      <el-table-column prop="component" label="组件路径" />
      <el-table-column prop="" label="是否显示">
        <template #default="{ row }">
          <MySwitch
            v-model="row.hidden"
            @change="handlerChange($event, ref(row))"
          />
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="创建时间" />
      <el-table-column prop="" label="操作" width="180" align="center">
        <template #default>
          <el-row type="flex" justify="space-around">
            <el-button type="primary" :icon="Edit" circle />
            <el-button type="warning" :icon="Plus" circle />
            <el-button type="danger" :icon="Delete" circle />
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <MyForm></MyForm>
  </el-card>
</template>



<style lang="scss" scoped>
</style>